<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view  class="header" style=" position: fixed,top:0">
			<!-- 定位城市 -->
			<view class="addr"    @tap="showModal" >
				<view class="cuIcon-locationfill text-red"></view>
				{{city.name}}
			</view>
			<!-- 搜索框 -->
			<view class="input-box">
				<input placeholder="默认关键字" placeholder-style="color:#c0c0c0;"  />
				<view class="icon search"></view>
			</view>
		
		</view>
		
		<sl-filter  :color="titleColor" :themeColor="themeColor" :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :menuList="menuList"
		 @result="result"></sl-filter>
		
		<view class="uni-common-mt">
			<view>
				<map :latitude="latitude" :longitude="longitude" :scale="scale" :markers="covers" @callouttap="callouttap" @markertap="callouttap"	>
				</map>
			</view>
		</view>
		
		<view class="cu-load load-modal" v-if="isLoading">
			<view class="cuIcon-emojifill text-orange"></view>
			<view class="gray-text">{{loadMoreDefalutText}}</view>
		</view>
		
		<uni-drawer :visible="showLeft" mode="left"   @close="closeDrawer">
			
			<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
				<view class="cu-item arrow" v-for="(item,index) in citys" :key="index">
					<button @tap="tabSelect" :data-city="item" class="content">
						<text class="text-grey">{{item.name}}</text>
					</button>
				</view>
			</view>
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-red margin-tb-sm lg" @tap="hideModal">关闭</button>
			</view>
		</uni-drawer>
	</view>
</template>
<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	
	import uniDrawer from '@/components/uni-drawer.vue'

	export default {
		components: {
			slFilter,
			uniDrawer
		},
		data() {
			return {
				title: 'map',
				showLeft: false,
				isLoading:false,
				latitude: 30.658588,
				longitude: 104.066277,
				covers: [],
				scale:8,
				citys:[],
				city:{
					id:1,
					name:"成都市"
				},
				showType:"Area",
				queryParams: {
					query: '',
					Area:'',
					HouseType:'',
					HousePrice:'',
					CityId:'',
					houseAreaId:null,
				},
				themeColor: '#D1372C',
				titleColor: '#666666',
				menuList: [{
						'title': '区域',
						'key': 'Area',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '区域',
								'value': ''
							}
						]
					},
					{
						'title': '价格',
						'key': 'HousePrice',
						'isSort': false,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '不限',
								'value': ''
							}
						]
					},
					{
						'title': '业态',
						'key': 'HouseType',
						'isSort': true,
						'reflexTitle': true,
						'defaultSelectedIndex': 0,
						'detailList': [{
								'title': '业态',
								'value': ''
							}
						]
					}
				]
				}
		},
		onLoad() {
			var me = this;
			me.citys=getApp().globalData.citys;
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
				this.longitude=this.city.lng;
				this.latitude=this.city.lat;
			}
			this.loadSelectList();
			this.loadMapInfo();
		},
		onShow(){
			if(this.city.id!=getApp().globalData.city.id)
			{
				this.city=getApp().globalData.city;
				this.queryParams.CityId=this.city.id;
				this.longitude=this.city.lng;
				this.latitude=this.city.lat;
				this.loadSelectList();
				this.loadMapInfo();
			}
		},
		onShareAppMessage(){
			return {
			      title: '选楼盘，查佣金，看房价'
			    }
		},
		methods: {
			closeDrawer(e) {
				this.showLeft = false
			},
			showModal(e) {
				this.showLeft = true;
			},
			hideModal() {
				this.showLeft = false;
			},
			tabSelect(e) {
				var selectCity=e.currentTarget.dataset.city;
				if(this.city.id!=selectCity.id)
				{
					getApp().globalData.city=selectCity;
					this.city=selectCity;
					this.longitude=this.city.lng;
					this.latitude=this.city.lat;
					uni.setStorage({
						key:"city",
					    data:this.city
					});
					this.loadSelectList();
				}
				this.showLeft=false;
			},
			result(val) {
				this.queryParams.HousePrice=val.HousePrice;
				this.queryParams.Area=val.Area;
				this.queryParams.HouseType=val.HouseType;
				this.covers=[],
				this.loadMapInfo();
			},
			// 重置所有选项，包括默认选项，并更新result
			resetAllSelect() {
				this.$refs.slFilter.resetAllSelect(function(result){
					console.log('重置之后回调的result:'+JSON.stringify(result))
				})
			},
			toDetail(){
				uni.navigateTo({
					url:'/pages/new/detail/detail'
				})
			},
			// 点击气泡
			callouttap(e){
				var me=this;
				if(me.queryParams.houseAreaId!=null)
				{
					uni.navigateTo({
						url:'/pages/new/detail/detail?id='+e.markerId
					})
				}
				else
				{
					me.queryParams.houseAreaId=e.markerId;
					me.scale=12;
					var cover=me.covers.filter(function(item){
						return item.id==e.markerId
					})[0];
					me.latitude=cover.latitude;
					me.longitude=cover.longitude;
					me.loadMapInfo();
				}
				
			},
			loadMapInfo(){
				var me = this;
				me.isLoading=true;
				uni.request({
					url: me.$rootUrl + '/House/GetHosueMapList',
					data: me.queryParams,
					method: 'GET',
					success(res) {
						me.isLoading=false;
						if (res.data.success) {
							me.covers = res.data.items;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading=false;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			},
			loadSelectList() {
				var me = this;
				uni.request({
					url: me.$rootUrl + '/Dic/GetNewDicList',
					data: {
						cityId:this.city.id
					},
					method: 'GET',
					success(res) {
						if (res.data.success) {
							me.menuList[0].detailList=res.data.areas;
							me.menuList[1].detailList=res.data.prices;
							me.menuList[2].detailList=res.data.type;
						} else {
							uni.showModal({
								content: '服务器错误!',
								showCancel: false
							});
						}
					},
					fail() {
						me.isLoading = false;
						me.loadMoreText = me.connectionFailText;
						uni.showModal({
							content: me.connectionFailText,
							showCancel: false
						});
					}
				});
			
			},
			
			
		}
	}
</script>

<style lang="scss">
	.content{
		
		.header {
			width: 100%;
			padding: 0 4%;
			height: 100upx;
			display: flex;
			align-items: center;
			position: fixed;
			/* #ifdef H5 */
			
			top: 44px;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			z-index: 10;
			background-color: #fff;
		
			/*  #ifdef  APP-PLUS  */
			top: var(--status-bar-height);
			/*  #endif  */
		
			.addr {
				width: 150upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				font-size: 28upx;
		
				.icon {
					height: 60upx;
					margin-right: 5upx;
					display: flex;
					align-items: center;
					font-size: 42upx;
					color: #ffc50a;
				}
			}
		
			.input-box {
				width: 100%;
				height: 60upx;
				background-color: #f5f5f5;
				border-radius: 30upx;
				position: relative;
				display: flex;
				align-items: center;
		
				.icon {
					display: flex;
					align-items: center;
					position: absolute;
					top: 0;
					right: 0;
					width: 60upx;
					height: 60upx;
					font-size: 34upx;
					color: #c0c0c0;
				}
		
				input {
					padding-left: 28upx;
					height: 28upx;
					font-size: 28upx;
				}
			}
		
			.icon-btn {
				width: 120upx;
				height: 60upx;
				flex-shrink: 0;
				display: flex;
		
				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 42upx;
				}
			}
		}
		.list{
			margin-top:48px;
			
		}
		.uni-common-mt{
			map{
				width:100%;
				height:1200upx;
			}
		}
	}
	
	.text {
		margin-top: 50px;
		margin-left: 20px;
		width: 100%;
	}
</style>
